<template>
	<view class="content">
		<view v-if='logs && logs.length == 0' style='padding-top:30vh;'>
			<u-empty mode="list" text='暂无记录'>
			</u-empty>
		</view>
		<view v-else>
			<view v-for='(item,index) in logs' :key='index'>
				<view class='list'>
					<u-row>
						<u-col span='9'>
							<view>
								<view class='title'>
									<view v-if='item.status == "accepted" || item.status == "scheduled"'>
										<text style='padding: 0px 5px;background-color:#ff9900;color:#fff;font-size:12px;border-radius: 5px;'>银行处理中</text>
									</view>
									<view v-if='item.status == "retrieved"'>
										<text style='padding: 0px 5px;background-color:#19be6b;color:#fff;font-size:12px;border-radius: 5px;'>已到银行卡</text>
									</view>
									<view v-if='item.status == "rejected"'>
										<text style='padding: 0px 5px;background-color:#fab6b6;color:#fff;font-size:12px;border-radius: 5px;'>提现失败</text>
									</view>
									<view v-if='item.status == "cancelled"'>
										<text style='padding: 0px 5px;background-color:#909399;color:#fff;font-size:12px;border-radius: 5px;'>已取消</text>
									</view>
								</view>
								
								<view class='title'>{{$u.timeFormat(new Date(item.createdTime), 'yyyy-mm-dd hh:MM:ss')}}
								</view>
							</view>
						</u-col>
						<u-col span='3'>
							<view v-if='item.status == "scheduled"' @click='cancel(index)'>
								<view class='price'>{{item.amount}}</view>
								<view style='color:#909399;font-size: 10px;'>[点击取消]</view>
							</view>
							<view v-else>
								<view class='price'>{{item.amount}}</view>
								<view v-if='item.fee > 0' style='font-size: 10px;color:#19be6b'>手续费:{{item.fee}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-line></u-line>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logs: [],
				page: 1,
				limit: 30,
				status: 'loadmore',
				withdrawStatus: {
					'accepted': '银行处理中',
					'retrieved': '已提现',
					'rejected': '提现失败',
					'cancelled': '已取消'
				}
			}
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.page++
				this.getWithdrawalLogs()
			}
		},
		onLoad(options) {
			this.getWithdrawalLogs()
		},
		methods: {
			cancel(index){
				uni.showModal({
					title: '',
					content: '取消后钱会返回钱包，是否确定取消提现？',
					success: (data) => {
						if(data.confirm){
							this.request.post(`api/withdraws/${this.logs[index].id}/cancel`).then((res) => {
								this.logs[index].status = 'cancelled'
								uni.showModal({
									title: '',
									content: '取消成功！',
									showCancel: false,
									success: () => {
										
									}
								})
							})
						}
					}
				})
			},
			getWithdrawalLogs() {
				uni.showLoading()
				this.request.get(`api/withdraws`, {
					'@filter': `entity.getStatus() != 'pending'`,
					'@order': 'entity.createdTime|DESC',
					limit: this.limit,
					page: this.page
				}).then((res) => {
					console.log(res.data)
					if (res.data.length < this.limit) {
						this.status = 'nomore'
					}
					for (let i of res.data) {
						this.logs.push(i)
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	.condition {
		padding: 10px;
		background-color: #f3f3f3;
	}

	.type {
		background-color: #fff;
		border-radius: 20px;
		color: #606266;
		float: right;
		padding: 5px 20px;
		margin-right: 10px;
		font-size: 14px;
		line-height: 16px;
	}

	.title {
		color: #606266;
	}

	.time {
		color: #909399;
		font-size: 12px;
	}

	.list {
		padding: 10px;
	}

	.price {
		font-size: 21px;
		color: #f56c6c;
	}
</style>